<template>
  <div id="seats">
    <h1>餐桌状态显示</h1>
    <el-row :gutter="20" class="search-group" align="middle">
      <el-col :span="6"><div class="grid-content bg-purple">
        <!--        查询: 通过分类查询 start-->
        <el-select v-model="conditionPeopleNum" clearable placeholder="按人数查询桌台">
          <el-option
            v-for="item in peopleNumList"
            :key="item"
            :label="item + '人桌'"
            :value="item">
          </el-option>
        </el-select>
        <!--        查询: 通过分类查询 end-->
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">
        <!--        查询: 通过type(大厅还是包间进行查询) start-->
        <el-select v-model="conditionType" filterable clearable placeholder="按桌台类型进行查询">
          <el-option
            v-for="item in typeList"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
        <!--        查询: 通过type(大厅还是包间进行查询) end-->
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">
        <!--        查询: 通过桌台状态查询 start-->
        <el-select v-model="conditionState" clearable placeholder="按桌台状态进行查询">
          <el-option
            v-for="item in stateList"
            :key="item.value"
            :label="item.desc"
            :value="item.value">
          </el-option>
        </el-select>
        <!--        查询: 通过桌台状态查询 end-->
      </div></el-col>
      <el-col :span="6"><div class="grid-content">
        <el-row>
          <el-col :span="12">
            <el-button type="primary" icon="el-icon-search" @click="searchSeats"></el-button>
          </el-col>
          <el-col :span="12">
            <el-button type="primary" plain @click="clearAll">一键清台</el-button>
          </el-col>
        </el-row>
      </div>
      </el-col>
    </el-row>
<!--      <el-row :gutter="20" class="seats-show" v-if="mylist.tableList.length!==0">-->
<!--      <el-col :span="4" v-for="(item,index) in mylist.tableList" :key="index">-->
<!--&lt;!&ndash;        <div class="grid-content">&ndash;&gt;-->
<!--          <Oneseat :oneSeatProp="item" v-if="getData"></Oneseat>-->
<!--&lt;!&ndash;        </div>&ndash;&gt;-->
<!--      </el-col>-->
<!--    </el-row>-->
    <el-row :gutter="20" class="seats-show" v-if="showSeat.length!==0">
      <el-col :span="4" v-for="(item,index) in showSeat" :key="index">
        <!--        <div class="grid-content">-->
        <Oneseat :oneSeatProp="item" v-if="getData"></Oneseat>
        <!--        </div>-->
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="pager">
<!--        <Page></Page>-->
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="12"
          :total="seatsData.length"
        @current-change="changePage">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {mapActions,mapState,mapGetters,mapMutations} from 'vuex'
  import OneSeat from '../../components/front/cf/OneSeat';
  // import Page from '../../components/common/Page';
  // import
  export default {
    name: "TakingOrder",
    components: {
      Oneseat: OneSeat,
      // Page:Page
    },
    inject:['reload'],
    data(){
      return {
        reqSuccess: false,
        conditionPeopleNum: '',
        conditionType: '',
        conditionState: '',
        getData: false,//代表请求成功,显示桌号
        seatsData:[],
        showPage: 1
      }
    },
    methods: {
      ...mapActions('seats/',['seatsAC','changeSeatState']),
      ...mapActions(['getTable','changePage']),
      ...mapMutations(['setPageLenght']),
      changePage(val) {
        this.showPage=val
      },
      clearAll(){
        let obj = {
          number: 0,
          state: 1
        }
        this.changeSeatState(obj).then(res=>{
          //todo: 改变当前的状态(页面显示i)
          console.log('清空全部桌台:',res)
          if (res.code === '200') {
            this.$message.success('一键清台成功')
            // sessionStorage.setItem('allBills','[]')
            console.log('父组件注入: ',)
            this.reload()
          }
        })
      },
      searchSeats() {
        let obj = {
          state: 0,
          peopleNum: 0,
          type: 'null'
        }
        obj.state = this.conditionState === '' ? 0:this.conditionState
        obj.peopleNum = this.conditionPeopleNum === '' ? 0:this.conditionPeopleNum
        obj.type = this.conditionType === '' ? 'null':this.conditionType
      this.seatsAC(obj).then(res => {
        console.log('searchSeats() 成功渲染页面')
        // this.setPageLenght(12)
        // this.getTable(res)
        // this.changePage(1)
        this.seatsData = res
      })
    },
  
  },
    computed: {
      ...mapState('seats/',{
        peopleNumList: state => state.peopleNumList,
        typeList: state => state.typeList,
        stateList: state => state.stateList,
        seatsList: state => state.seatsList
      }),
      ...mapGetters('seats/',['showSeatsArr','seatLen']),
      ...mapGetters(['mylist']),
      showSeat(){
        return this.seatsData.filter((item,index) => (index>=((this.showPage)*12-12)&&index<(this.showPage)*12))
        
      }
    },
    
    created() {
      
      let obj = {
        state: 0,
        peopleNum: 0,
        type: 'null'
      }
      this.seatsAC(obj).then(res => {
        console.log('created 餐桌',res)
        // this.getTable(res)
        // this.setPageLenght(12)
        // this.changePage(1)
        this.getData = true
        this.seatsData = res
      })
    }
  }
</script>

<style lang="less" scoped>
#seats {
  h1{
    color: #909399;
    text-align: center;
  }
  .search-group {
    margin: 20px 0;
    .el-row {
      /*margin-bottom: 20px;*/
      &:last-child {
        margin-bottom: 0;
      }
    }
    .el-col {
       border-radius: 4px;
      display: flex;
      justify-content: center;
      &:last-child {
        justify-content: space-between;
      }
     }
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }
  }
  .pager {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
